<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div class="app">
        <input type="text" name="" id="">
        <img :src="imgsrc" width="100px" height="100px" :alt="mothd" :title="mothd" v-if='flag' @click='ChangeFlag'>
        <button @click='remove'>{{mothd.length}}</button>
        <span>{{total*price}}</span>
        <p v-for='(item,index) in arr'>
            {{item}}-{{index+1}}
        </p>
        <!-- 这里的v-model代表的是total值 更改的同时也会是total发生改变 -->
        <input type="text" name="" id="" v-model='total'>
        <button @click='del'>{{total}}</button> 
    </div>
    <script>
        console.log(Vue);
        const vm = new Vue({
            el: ".app",
            data: {
                mothd: '这是一个无意义的东西',
                imgsrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmx12%2F0F420115037%2F200F4115037-11.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638364964&t=b3ec9fe954fcf0a433e21521e3ad093a",
                flag:true,
                total:1,
                price:105,
                arr:['王小华','李大炮','张狗蛋','吴大麻子']
            },
            // 这里的methods不能更改 创建函数必须是他
            methods:{
                ChangeFlag(){
                    this.flag = !this.flag
                },
                remove:function(){
                    this.flag=!this.flag
                    this.total++
                },
                del:function(){
                    this.arr.splice(0,1)
                    //从依次上到下删除
                    this.total++
                }
            }
        })
    </script>
</body>

</html>